<template>
  <div class="form-check" :class="[{ disabled: disabled }, inlineClass]">
    <label :for="cbId" class="form-check-label">
      <input
        :id="cbId"
        class="form-check-input"
        type="checkbox"
        :disabled="disabled"
        v-model="model"
      />

      <span class="form-check-sign"></span>

      <slot>
        <span v-if="inline">&nbsp;</span>
      </slot>
    </label>
  </div>
</template>

<script>
export default {
  name: "base-checkbox",
  model: {
    prop: "checked",
  },
  props: {
    disabled: Boolean,
    inline: Boolean,
    checked: [Array, Boolean],
  },
  data() {
    return {
      cbId: "",
      touched: false,
    };
  },
  computed: {
    model: {
      get() {
        return this.checked;
      },
      set(check) {
        if (!this.touched) {
          this.touched = true;
        }
        this.$emit("input", check);
      },
    },
    inlineClass() {
      if (this.inline) {
        return `form-check-inline`;
      }
      return 0;
    },
  },
  created() {
    this.cbId = Math.random().toString(16).slice(2);
  },
};
</script>

<style scoped>
.form-check {
  display: flex;
  align-items: center;
  margin: 20px 0; /* 增加上下间距 */
}

.form-check-label {
  font-size: 18px; /* 增加字体大小 */
  font-weight: 400; /* 加粗 */
  color: #333; /* 深色字体提升可读性 */
  font-family: "Poppins", Arial, sans-serif; /* 设置更美观的字体 */
}

.form-check-input {
  width: 20px; /* 调整复选框大小 */
  height: 20px;
  margin-right: 8px; /* 增加复选框和文字的间距 */
}

/* 美化选中的复选框 */
.form-check-input:checked {
  background-color: #007bff; /* 选中后变蓝色 */
  border-color: #007bff;
}
</style>


